<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}巧巧点餐管理后台{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="/static/dashboard/css/style.css">
    {% block extra_css %}{% endblock %}
    <style>
        .footer {
            text-align: center;
            padding: 15px 0;
            color: #666;
            font-size: 12px;
            border-top: 1px solid #eee;
            margin-top: 20px;
            width: 100%;
        }
        .footer a {
            color: #666;
            text-decoration: none;
        }
        .footer a:hover {
            color: #333;
        }
    </style>
</head>
<body>
    {% if user.is_authenticated %}
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>巧巧点餐后台</h3>
        </div>
        <div class="sidebar-menu">
            <ul>
                <li>
                    <a href="{% url 'dashboard:home' %}" {% if request.path == '/dashboard/' %}class="active"{% endif %}>
                        <i class="fas fa-tachometer-alt"></i> 仪表盘
                    </a>
                </li>
                <li>
                    <a href="{% url 'dashboard:food_list' %}" {% if '/dashboard/foods' in request.path %}class="active"{% endif %}>
                        <i class="fas fa-utensils"></i> 菜品管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'dashboard:category_list' %}" {% if '/dashboard/categories' in request.path %}class="active"{% endif %}>
                        <i class="fas fa-tags"></i> 分类管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'dashboard:order_list' %}" {% if '/dashboard/orders' in request.path %}class="active"{% endif %}>
                        <i class="fas fa-shopping-cart"></i> 订单管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'dashboard:user_list' %}" {% if '/dashboard/users' in request.path %}class="active"{% endif %}>
                        <i class="fas fa-users"></i> 用户管理
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="main-content">
        <div class="top-navbar">
            <button class="hamburger-menu" id="toggleSidebar">
                <i class="fas fa-bars"></i>
            </button>
            <div class="user-menu">
                <div class="dropdown">
                    <a href="#" class="dropdown-toggle" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span>{{ user.username }}</span>
                        <img src="/static/dashboard/img/placeholder.jpg" alt="User" class="avatar">
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i> 个人设置
                        </a>
                        <a href="{% url 'dashboard:logout' %}" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 消息提示 -->
        {% if messages %}
        <div class="messages-container">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        
        <!-- 主要内容 -->
        <div class="content-wrapper">
            {% block content %}{% endblock %}
        </div>
        
        <!-- 底部备案信息 -->
        <div class="footer">
            <a href="http://beian.miit.gov.cn/" target="_blank">黔ICP备2025046524号-2</a>
        </div>
    </div>
    {% else %}
    <!-- 未登录状态，只显示登录页面 -->
    <div class="login-page">
        {% block login_content %}{% endblock %}
        
        <!-- 登录页底部备案信息 -->
        <div class="footer">
            <a href="http://beian.miit.gov.cn/" target="_blank">黔ICP备2025046524号-2</a>
        </div>
    </div>
    {% endif %}
    
    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JS -->
    <script src="/static/dashboard/js/main.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html> 